<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        办公设备台账列表
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>资产编号</label>
                                    <input type="text" name="offEqCode" class="form-control" placeholder="请输入资产编号">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>设备名称</label>
                                    <input type="text" name="offEqName" class="form-control" placeholder="请输入设备名称">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>具体位置</label>
                                    <input type="text" name="offSpeLoc" class="form-control" placeholder="请输入具体位置">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>来源</label>
                                    <input type="text" name="offSource" class="form-control" placeholder="请输入来源">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>责任人</label>
                                    <input type="text" name="offPerLble" class="form-control" placeholder="请输入责任人">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-top: 5px;">
                                    <label>使用状态</label>
                                    <input type="text" name="offEqmSta" class="form-control" placeholder="请输入使用状态">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-top: 5px;">
                                    <label>使用部门</label>
                                    <input type="text" name="offWork" class="form-control" placeholder="请输入使用部门">
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search" style="margin-top: 5px;">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                        <div class="row form-inline"  id="toolbar">

                            <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="uploadFile()" style="margin-top: 5px;" shiro:hasPermission="drive:officesb:add">
                                <!--<i class="fa fa-plus"></i>-->
                                <span class="Bold">上传</span>
                            </a>

                            <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="addType()" style="margin-top: 5px;margin-right: 10px;" shiro:hasPermission="drive:officesb:add">
                                <!--<i class="fa fa-plus"></i>-->
                                <span class="Bold">添加</span>
                            </a>
                        </div>
                    </form>
                </div>
                <div class="box-body ">
                    <!--style=" overflow: auto;"-->
                    <table id="bootstrap-table" style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--创建类型模态框-->
<div class="modal fade" id="modal-create-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增办公设备台账信息</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-create" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">

                        <div class="form-group">
                            <label class="col-sm-4 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="offSortNum" autocomplete="off" placeholder="排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqName" autocomplete="off" placeholder="设备名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">资产编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqCode" autocomplete="off" placeholder="资产编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备厂家</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offManUrer" autocomplete="off" placeholder="设备厂家">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">出厂编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEacNumber" autocomplete="off" placeholder="出厂编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">产品型号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offProMod" autocomplete="off" placeholder="产品型号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">具体位置</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offSpeLoc" autocomplete="off" placeholder="具体位置">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用部门</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offWork" autocomplete="off" placeholder="使用部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">数量</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="offEqmUnm" autocomplete="off" placeholder="数量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">来源</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offSource" autocomplete="off" placeholder="来源">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用状态</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqmSta" autocomplete="off" placeholder="使用状态">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任人</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offPerLble" autocomplete="off" placeholder="责任人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">关键信息</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offKeyInfo" autocomplete="off" placeholder="关键信息">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offRemark" autocomplete="off" placeholder="备注">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--编辑类型模态框-->
<div class="modal fade" id="modal-edit-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑办公设备台账类型</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <!--隐藏的id主键-->
                        <input type="hidden" class="form-control" name="offId">

                        <div class="form-group">
                            <label class="col-sm-4 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="offSortNum" autocomplete="off" placeholder="排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqName" autocomplete="off" placeholder="资产编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">资产编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqCode" autocomplete="off" placeholder="设备名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备厂家</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offManUrer" autocomplete="off" placeholder="设备厂家">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">出厂编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEacNumber" autocomplete="off" placeholder="出厂编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">产品型号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offProMod" autocomplete="off" placeholder="产品型号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">具体位置</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offSpeLoc" autocomplete="off" placeholder="具体位置">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用部门</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offWork" autocomplete="off" placeholder="使用部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">数量</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="offEqmUnm" autocomplete="off" placeholder="数量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">来源</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offSource" autocomplete="off" placeholder="来源">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用状态</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offEqmSta" autocomplete="off" placeholder="使用状态">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任人</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offPerLble" autocomplete="off" placeholder="责任人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">关键信息</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offKeyInfo" autocomplete="off" placeholder="关键信息">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="offRemark" autocomplete="off" placeholder="备注">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--导入模态框-->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a th:href="@{/file/办公设备汇总台账模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>上次导入错误数据</label>
                        <a id="download-error"
                           th:data-url="@{/files/{user}/OffEquipmentError.xls(user=${session.user.account})}"
                           href="javascript:void(0);">点击下载</a>
                    </div>

                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-upload" type="button" class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-create-type", function () {
        js.validate.reset("typeForm-create");
        js.reset("typeForm-create");
    });

    /** 导入表单验证 */
    js.validate.init("typeForm-create", {
        fields: {
            offEqCode: {validators: {notEmpty: {message: '请输入资产编号'},
                    remote: {
                        url: ctx + "tool/offEquipment/checkUnique",
                        message: '资产编号已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            offId: function () {
                                return  "";
                            }
                        }
                    }
                }
            },
            offEqName:{validators: {notEmpty: {message: '请输入设备名称'}}},
            offEqmUnm:{validators: {notEmpty: {message: '请输入数量'}}}
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-edit-type", function () {
        js.validate.reset("typeForm-edit");
        js.reset("typeForm-edit");
    });

    /** 导入表单验证 */
    js.validate.init("typeForm-edit", {
        fields: {
            offEqCode: {validators: {notEmpty: {message: '请输入资产编号'},
                    remote: {
                        url: ctx + "tool/offEquipment/checkUnique",
                        message: '资产编号已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            offId: function () {
                                return  $("#typeForm-edit input[name='offId']").val();
                            }
                        }
                    }
                }
            },
            offEqName:{validators: {notEmpty: {message: '请输入设备名称'}}},
            offEqmUnm:{validators: {notEmpty: {message: '请输入数量'}}},
            offSortNum:{validators: {notEmpty: {message: '请输入序列号'}}}
        }
    });

    /*
    *上传文件
     */
    function uploadFile(){
        js.modal.open("modal-import");
    }
    /** 导入表单验证 */
    js.validate.init("importForm", {
        fields: {
            file: {
                validators: {
                    notEmpty: {message: '上传文件不能为空'},
                    file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                }
            }
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-import", function () {
        js.validate.reset("importForm");
        js.reset("importForm");
    });

    /*
    *添加类型
     */
    function addType(){
        js.modal.open("modal-create-type");
    }
    /** 导入设备台账信息 */
    $("#btn-upload").click(function () {
        var $this = $(this);
        $this.attr('disabled', true);
        js.validSubmit({
            formId: "importForm",
            url: ctx + "tool/offEquipment/import",
            data: new FormData($("#importForm")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-import");
                    $this.attr('disabled', false);
                }
            }
        });
    });
    /** 创建类型 */
    $("#btn-create-type").click(function () {
        if (js.validate.isValid("typeForm-create")) {
            js.post({
                url: ctx + "tool/offEquipment/add",
                data: $("#typeForm-create").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-create-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    });

    /** 创建类型 */
    $("#btn-edit-type").click(function () {
        if (js.validate.isValid("typeForm-edit")) {
            js.post({
                url: ctx + "tool/offEquipment/edit",
                data: $("#typeForm-edit").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-edit-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    });

    /*
    *编辑类型
     */
    function editType(row){
        $("#typeForm-edit").fillData(row);

        js.modal.open("modal-edit-type");
    }
    /*
    *删除类型
     */
    function delType(id){
        js.confirmPost({
            content: "删除数据将无法恢复，确认删除吗？",
            url: ctx + "tool/offEquipment/del",
            data: {"empId":id},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-type");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    }

    var table;

    $(function () {

        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "tool/offEquipment/list",
            showColumns: true,
            showExport: false,
            // height:600,
            pageSize:10,
            exportOptions:{
                ignoreColumn: [15,16,17,18,19]
            },
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        var pageSize = table.bootstrapTable('getOptions').pageSize;
                        var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                        // return index + 1;
                    }
                },
                { title: "设备名称", field: 'offEqName',width:300},
                { title: "资产编号", field: 'offEqCode',width:300},
                { title: "设备厂家", field: 'offManUrer',width:100},
                { title: "出厂编号", field: 'offEacNumber',width:300},
                { title: "产品型号", field: 'offProMod',width:200},
                { title: "具体位置", field: 'offSpeLoc',width:500},
                { title: "使用部门", field: 'offWork',width:200},
                { title: "来源", field: 'offSource',width:100},
                { title: "数量", field: 'offEqmUnm',width:100},
                { title: "使用状态", field: 'offEqmSta',width:100},
                { title: "责任人", field: 'offPerLble',width:100},
                { title: "关键信息", field: 'offKeyInfo',width:300},
                { title: "备注",field: 'offRemark',width:300},
                { title: "排序", field: 'offSortNum',width:100},
                { title: "创建人", field: 'offCreUser',width:70},
                { title: "创建时间", field: 'offCreDate',width:100},
                { title: "修改人", field: 'offUpdUser',width:70},
                { title: "修改时间", field: 'offUpdDate',width:100},
                {
                    title: "操作",
                    width: '110',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("drive:officematsb:edit")) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="editType(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                        }
                        if (hasP("drive:officesb:del")) {
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delType(' + row.offId + ')"> 删除</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        });
        // lockWindow();

        //导出的权限
        if(!hasP("drive:officematsb:edit")){
            $("div[class='export btn-group']").children().remove();
        }
        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
    });
    /** 下载导入失败excel */
    $("#download-error").click(function () {
        var that = $(this);
        js.post({
            url: ctx + "tool/offEquipment/exist",
            async: false,
            data: {
                url: that.attr("data-url")
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    that.attr("href", that.attr("data-url") + "?timeStamp=" + new Date().getTime());
                } else {
                    js.modal.warning("没有需要处理的文件");
                }
            }
        });
    });

    // function lockWindow(){
    //
    //     var randomId=_getRandomString(5);
    //
    //     $("#bootstrap-table thead").attr("id",randomId);
    //     menuFixed(randomId);
    //
    //     // $("#bootstrap-table thead").attr("id","nav_keleyi_com");
    //     // menuFixed('nav_keleyi_com');
    //
    //     //alert($("#bootstrap-table").outerWidth());
    //     // var width=$("#bootstrap-table").outerWidth();
    //     // $("#bootstrap-table thead").attr("style"," padding: 0px;position: relative;top: 0; background: #fff; width: "+width+"px;");
    //     // $("#bootstrap-table tbody").attr("style"," width: "+width+"px; display: inline-block;");
    //
    // }
    //
    //
    // function menuFixed(id) {
    //     var width=$("#"+id).parent().outerWidth();
    //     $("#"+id).attr("style"," padding: 0px;position: relative;top: 0; background: #fff; width: "+width+"px; ");
    //     $("#"+id).next().attr("style"," width: "+width+"px; display: inline-block;");
    //
    //     var obj = document.getElementById(id);
    //     var _getHeight = $("#"+id).offset().top;
    //     window.onscroll = function () {
    //         changePos(id, _getHeight);
    //         var i=0;
    //         $('#'+id).find("tr th").each(function () {
    //             var w=Math.floor($(this).outerWidth);
    //             $('#'+id).next().find('tr:eq(0)').find('td:eq('+i+')').width(w);
    //             i++;
    //         });
    //     }
    //
    //     //找当前表格最近的div；样式为fixed-table-body。
    //     $('#'+id).parents(".fixed-table-body").first().scroll(function(){
    //         $("#"+id).css("z-index"," 10");
    //         var leftScroll=$(this).scrollLeft();
    //         //固定居左：第一种写法
    //         // if(leftScroll==0) {
    //         //     $("#"+id).css("left"," 41px");
    //         // }else{
    //         //     $("#"+id).css("left"," -"+(parseInt(leftScroll)+parseInt(-41))+"px");
    //         // }
    //         //移动的距离：第二种写法，最优。
    //         $("#"+id).css('transform', 'translateX(-'+(parseInt(leftScroll))+'px)')
    //     });
    //
    //     // $(".fixed-table-body").scroll(function(){
    //     //     $("#"+id).css("z-index"," 10");
    //     //     var leftScroll=$(this).scrollLeft();
    //     //
    //     //     if(leftScroll==0) {
    //     //         $("#"+id).css("left"," 41px");
    //     //     }else{
    //     //         $("#"+id).css("left"," -"+(parseInt(leftScroll)+parseInt(-41))+"px");
    //     //     }
    //     // });
    // }
    //
    // function changePos(id, height) {
    //     var obj = document.getElementById(id);
    //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //     if (scrollTop < height) {
    //         obj.style.position = 'relative';
    //     } else {
    //         obj.style.position = 'fixed';
    //     }
    // }
    // //获取长度为len的随机字母
    // function _getRandomString(len) {
    //     len = len || 32;
    //     var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
    //     var maxPos = $chars.length;
    //     var pwd = '';
    //     for (i = 0; i < len; i++) {
    //         pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    //     }
    //     return pwd;
    // }
</script>